<template>
    <view>
        <!-- pages/mine/mywatch/mywatch.wxml -->
        <view class="topbox">
            <cu-custom :isShowicon="true" :isBack="true">
                <view slot="backText">返回</view>
                <view slot="content">我的追剧</view>
            </cu-custom>
        </view>

        <view class="zjlist margin-lr-sm margin-top-xs">
            <view class="zjlistitem flex align-center justify-between margin-top" v-for="(item, index) in list" :key="index">
                <view class="zjlistitempic" @tap="gotoPlay" :data-id="item.video_id" :data-num="item.chapnum_read"><image :src="item.vertical_cover" mode="widthFix"></image></view>

                <view class="zjlistitemcont flex align-start justify-center flex-direction margin-left" @tap="gotoPlay" :data-id="item.video_id" :data-num="item.chapnum_read">
                    <view class="text-xl text-bold text-black">{{ item.title }}</view>
                    <view class="margin-top-sm">
                        看到
                        <text class="text-orange margin-left-xs">{{ item.chapter_read }}</text>
                    </view>
                    <view class="margin-top-xs">
                        更新至
                        <text class="text-black margin-left-xs">{{ item.chapter_recent }}</text>
                    </view>
                </view>

                <view class="zjlistitemright flex align-center justify-center" @tap="deleteItem" :data-id="item.video_id">
                    <text class="zjlistitemicon cuIcon-delete lg text-gray"></text>
                </view>
            </view>
            <viem class="emptybox flex" v-if="list.length <= 0">
                <image src="/static/images/empty.png" mode="widthFix"></image>
                <view class="text-gray text-xl">空空如也</view>
            </viem>
        </view>
    </view>
</template>

<script>
// pages/mine/myafter/myafter.js
const _api = require('../../../utils/api.js');
const apiurl = require('../../../utils/apiurl/public.js');
export default {
    data() {
        return {
            list: [],

            pageparams: {
                page: 1,
                limit: 20
            },

            loading: false,

            //是否在加载
            //是否加载完成
            isover: false,

            pagenum: 0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.getList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        let pagenum = 'pageparams.page';
        this.setData({
            [pagenum]: 1,
            list: []
        });
        this.getList();
        uni.stopPullDownRefresh();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        if (!this.loading) {
            return;
        }
        if (this.isover) {
            return;
        }
        let pagenum = 'pageparams.page';
        let page = this.pageparams.page;
        this.setData({
            [pagenum]: (page += 1)
        });
        this.getList();
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        getList() {
            uni.showLoading({
                title: '数据加载中'
            });
            this.setData({
                loading: true
            });
            _api.get(apiurl.userfavorites, {
                ...this.pageparams
            }).then((res) => {
                uni.hideLoading();
                this.setData({
                    loading: false
                });
                if (this.pageparams.page == 1) {
                    this.setData({
                        list: res.data.data
                    });
                } else {
                    let newdata = [...this.list, ...res.data.data];
                    this.setData({
                        list: newdata
                    });
                }
                if (res.data.data.length < this.pageparams.limit) {
                    this.setData({
                        isover: true
                    });
                }
            });
        },

        deleteItem(e) {
            //删除追剧
            console.log(e.currentTarget.dataset.id);
            let id = e.currentTarget.dataset.id;
            _api.post(apiurl.cancelfavorite, {
                video_id: id
            }).then((res) => {
                if (res.data.code == 0) {
                    uni.showToast({
                        title: '取消成功！'
                    });
                    setTimeout(() => {
                        uni.hideToast();
                        let pagenum = 'pageparams.page';
                        this.setData({
                            list: [],
                            [pagenum]: 1
                        });
                        this.getList();
                    }, 1000);
                }
            });
        },

        gotoPlay(e) {
            //去播放
            console.log(e);
            let id = e.currentTarget.dataset.id;
            let num = e.currentTarget.dataset.num;
            let page = '/pages/play/play?id=' + id + '&num=' + num;
            // console.log(id);
            uni.navigateTo({
                url: page
            });
        }
    }
};
</script>
<style>
/* pages/mine/mywatch/mywatch.wxss */
page {
    background: #ffffff;
    padding-bottom: 40rpx;
    padding-top: 160rpx;
}
.zjlistitempic {
    height: 260rpx;
    flex: 0 0 165rpx;
    border-radius: 12rpx;
    overflow: hidden;
}
.zjlistitempic image {
    width: 100%;
    display: block;
    object-fit: cover;
}
.zjlistitemright {
    flex: 0 0 80rpx;
}
.zjlistitemcont {
    flex: 1;
    width: 400rpx;
}
.zjlistitemicon {
    font-size: 50rpx;
}
</style>
